<template>
    <el-container>
        <el-affix :offset="10">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                    <el-radio-button :value="false">展开</el-radio-button>
                    <el-radio-button :value="true">折叠</el-radio-button>
                </el-radio-group>
                <el-header style="
                  display: flex;
                  align-items: center;
                  height: 60px;
                  border: 1px solid #f5f6fe;
                  width: auto;
                ">
                    <div style="flex-grow: 1"></div>
                    <router-link to="/cart" style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 50px;
                    padding-right: 20px;
                    text-decoration: none;
                    color: inherit;
                  ">
                        <el-badge :value="bookStore.orderedBooksCount" :max="10" class="badge-item">
                            <span class="icon-wrapper">
                                <el-icon style="font-size: 25px">
                                    <ShoppingCart />
                                </el-icon>
                            </span>
                        </el-badge>
                    </router-link>
                    <div style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 50px;
                    padding-right: 20px;
                  ">
                        <span class="icon-wrapper">
                            <el-icon style="font-size: 25px">
                                <Setting />
                            </el-icon>
                        </span>
                    </div>
                    <div style="padding-right: 20px">
                        <el-popover placement="bottom" trigger="hover">
                            <el-menu mode="vertical">
                                <el-menu-item index="1" @click="handleMenuItemClick(1)">个人中心</el-menu-item>
                                <el-menu-item index="2" @click="handleMenuItemClick(2)">关于我们</el-menu-item>
                                <el-menu-item index="3" @click="handleMenuItemClick_exit(3)">退出登录</el-menu-item>
                            </el-menu>
                            <template #reference>
                                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                            </template>
                        </el-popover>
                    </div>
                </el-header>
            </div>
            <div style="display: flex;">
                <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse" @select="handleSelect">
                    <el-menu-item index="/index">
                        <el-icon>
                            <House />
                        </el-icon>
                        <template #title>首页 </template>
                    </el-menu-item>
                    <el-menu-item index="/booklist">
                        <el-icon>
                            <Folder />
                        </el-icon>
                        <template #title>图书列表</template>
                    </el-menu-item>
                    <el-menu-item index="/booksales">
                        <el-icon>
                            <Reading />
                        </el-icon>
                        <template #title>图书售卖</template>
                    </el-menu-item>
                    <el-menu-item index="/help">
                        <el-icon>
                            <Warning />
                        </el-icon>
                        <template #title>帮助</template>
                    </el-menu-item>
                </el-menu>
                <el-main style="flex: 1;">
                    <h3 style="text-align: left">帮助中心</h3>
                </el-main>
            </div>
            <!-- 路由出口，用于显示当前路由对应的组件 -->
            <router-view></router-view>
        </el-affix>
        <el-footer style="
            display: flex;
            justify-content: center;
            align-items: center;
            height: 60px;
          ">
            <div>Designed with by XXX</div>
        </el-footer>
    </el-container>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

interface BookStore {
    orderedBooksCount: number;
}

export default defineComponent({
    data() {
        return {
            isCollapse: false,
            bookStore: {
                orderedBooksCount: 0
            } as BookStore
        };
    },
    methods: {
        handleSelect(key: string) {
            console.log('选中的菜单项：', key);
        },
        handleMenuItemClick(index: number) {
            console.log('点击的菜单项：', index);
        },
        handleMenuItemClick_exit(index: number) {
            console.log('点击退出登录：', index);
        }
    }
});
</script>